<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,p,input {margin:0; padding:0;}
img {border:none; vertical-align:top;}
.box {width:350px; height:330px; border:2px solid #333; position:relative;margin:50px auto 0;}
input {width:30px; height:330px; opacity:0.8; filter:alpha(opacity=80);  border:none; background:#84D7FF; z-index:2}
#pre { position:absolute;}
#next {position:absolute; right:0; top:0;}
p {width:350px; text-align:center;}
img {position:absolute; bottom:0; left:50%; margin-left:-150px;}
#page {height:30px;line-height:30px; top:0; left:0;}
#message { height:30px;line-height:30px; position:absolute;bottom:0; left:0; z-index:1;background:#000; opacity:0.3; filter:alpha(opacity=30);color:#fff;}
</style>
</head>
<script>
window.onload = function (){
  var oPre = document.getElementById('pre');
  var oNext = document.getElementById('next');
  var oImg = document.getElementById('img');
  var oPage = document.getElementById('page');
  var oMsg = document.getElementById('message');
  var arrUrl = ['img1.jpg','img2.jpg','img3.jpg'];  //引号很重要
  var arrText = ['美女1','美女2','美女3'];				//引号很重要
  var num = 0;
  //第一步：（重要）初始化【一律先全部以具体的数字来填，最后再考虑全局，灵活处理掉数字......最后由于这块初始化的部分有重复，所以我们应该设置一个函数把它包起来，这里我是没有包起来的】
  oPage.innerHTML = num+1 + '/' + arrText.length;
  oImg.src = arrUrl[num];
  oMsg.innerHTML = arrText[num];
  //初始化结束，然后全部搬下来给按钮设置
  oNext.onclick = function (){		//发现只要改变num值就可以实现下翻页的效果，所以再加个num++
    num ++;							//同时为了保证数值不是无穷递增，因此需要在num下边再单独给num设置if条件语句(只会影响num值，对下边的代码不会有影响的。
	if (num == arrText.length){		//也就是说，判断语句是设置是否循环切换)
	  num = 0;						//设置循环
	};
    oPage.innerHTML = num+1 + '/' + arrText.length;
    oImg.src = arrUrl[num];			//取上限值
    oMsg.innerHTML = arrText[num];		//......最后由于与初始化的部分有重复，且初始化部分用到的地方多，所以我们应该设置一个函数把初始化的部分都包起来，简化
  };
  oPre.onclick = function (){
   num --;							//设置 不 循环
   if (num == -1){					//取下限值
     num =0;
   }
   oPage.innerHTML = num+1 + '/' + arrText.length;
   oImg.src = arrUrl[num];
   oMsg.innerHTML = arrText[num];
  }
}
</script>
<body>
<div class="box">
  <input id="pre" type="button" value="&lt;">
  <input id="next" type="button" value="&gt;">
  <img id="img" src="" alt="">
  <p id="page">数量正在加载中...</p>
  <p id="message"><span>信息正在加载中...</span></p>
</div>
</body>
</html>
